倍数|时针_CSS32D/3D转换手把手教你

篇首语：本文由编程笔记#小编为大家整理，主要介绍了CSS3 2D/3D转换手把手教你相关的知识，希望对你有一定的参考价值。

CSS 转换&＃xff08;transforms&＃xff09;允许您移动、旋转、缩放和倾斜元素。

2D转换

主要通过transform 属性&＃xff0c;该属性使用函数来定义的。

包含以下方法

1.位移

• translate&＃xff08;&＃xff09;&＃xff1a;translate&＃xff08;x&＃xff09;接受一个参数表示沿x轴位移x像素&＃xff0c;沿y轴默认为0&＃xff0c;接受两个参数translate&＃xff08;x,y&＃xff09;表示沿x轴位移的距离和沿y轴位移的距离
• 分开写法translateX(x) 、translateY(y)
• 数值可以为正负

例子&＃xff1a;

效果&＃xff1a;

2.旋转

• **rotate(angle)&＃x1f617;*只有一个参数&＃xff0c;表示选择的角度&＃xff0c;单位用deg&＃xff08;度&＃xff09;
• 2d空间只能围绕元素中心的z轴旋转
• 参数为正值则顺时针旋转&＃xff0c;为负值则逆时针旋转

例如&＃xff1a;

效果&＃xff1a;

3.缩放

• scale(): 一个参数的时候表示同时在x轴和y轴两个方向缩放相同的倍数&＃xff0c;两个参数表示分别x和y轴方向缩放相应的倍数

例子&＃xff1a;

效果&＃xff1a;

4.变形

• **skew()&＃xff1a;**表示沿x轴变形x角度&＃xff0c;y轴默认为0&＃xff0c;两个参数表示沿x轴变形x的角度&＃xff0c;沿y轴变形y的角度。单位为deg&＃xff08;度&＃xff09;
• 分开写法&＃xff1a;skewX(), skewY()

例子&＃xff1a;

效果&＃xff1a;

5.matrix()

matrix 方法有六个参数&＃xff0c;包含旋转&＃xff0c;缩放&＃xff0c;移动&＃xff08;平移&＃xff09;和倾斜功能。

可以说是前面的合写

参数如下&＃xff1a;

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())


6.转换中心

通过该属性transform-origin可以改变 旋转、缩放、变形的原点。默认为center&＃xff0c;可以设置为关键字&＃xff1a;top bottom center left right&＃xff0c;也可以使用px、em、百分比值位置的。

例如&＃xff1a;把转换中心改为由左上角。然后选择90度

.item:active
transform-origin: left top;
transform: rotate(90deg);



效果&＃xff1a;

3D转换

既然是3D&＃xff0c;我们就知道肯定是一个立体的&＃xff0c;那么就有了空间感觉。既有了x轴、y轴、z轴。

下表列出了所有 3D 变换属性&＃xff1a;

CSS 3D 转换方法

1.应用在父元素上

• 3D变换需要父元素设置样式才能保留3d的变化效果

• 保留3D变换&＃xff1a;transform-style: preserve-3d&＃xff0c;默认值为flat表示不保留3D变换

• 设置视角深度,又叫景深&＃xff1a;perspective: 1000px 3D 元素距视图的距离&＃xff0c;单位为px

• 观察点位置&＃xff1a;perspective-origin&＃xff1a;和上面的变换中心一样&＃xff0c;只是变成了三维的&＃xff0c;多了一个z轴的坐标。

2.旋转

translate3d translateX translateY translateZ

• rotate3d(x, y, z, angle)&＃xff1a;沿着x&＃xff0c;y&＃xff0c;z三个方向矢量值确定的坐标点旋转angle角度
• backface-visibility 属性定义当元素旋转到背面向屏幕时是否可见&＃xff0c;visible背面可见&＃xff0c;hidden背面不可见
• rotateX(angle)、rotateY(angle) 、rotateZ(angle)&＃xff1a;沿着对应轴旋转对应度数。

例子&＃xff1a;

.item
width: 200px;
height: 300px;
border: 2px solid red;
margin: 200px auto;
background: powderblue;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);



效果&＃xff1a;这个一般要配合动画才显示好的效果。

我们要知道围绕x轴、y轴、z轴是什么样的效果&＃xff1f;在以后就不会犯迷糊了

3.位移

translate3d translateX translateY translateZ

• translate3d(x, y, z)&＃xff1a;必须传递三个参数
• translateX(x)&＃xff1a;为正则沿着x轴向右位移&＃xff0c;为负则沿着x轴向右位移
• translateY(y):为正则沿着y轴向下位移&＃xff0c;为负则沿着y轴向上位移
• translateZ(z):为正则沿着z轴向屏幕外位移&＃xff0c;为负则沿着z轴向屏幕内位移

4.缩放

scale3d scaleX scaleY scaleZ

• scale3d(num, num, num)&＃xff1a;必须传递三个参数
• scaleX(x) scaleY(y) scaleZ(z)&＃xff0c;分别代表x和y轴和z轴方向缩放相应的倍数。

写在最后

我觉得2D/3D还是很好玩的&＃xff0c;能够实现很多美观的特效&＃xff0c;尤其是和动画结合后。3D的z轴很难演示出效果&＃xff0c;结合动画更容易体现出来。

下一篇使用3D结合一点点动画实现下图酷炫相册效果。

共勉

你必须非常努力&＃xff0c;才能看起来毫不费力。